import React from 'react'
// props校验，先下载npm i props-types
// 引入
import PropTypes from 'prop-types';
import './04context.css'

// 创建context得到两个组件
const { Provider, Consumer} = React.createContext()
class App extends React.Component{
    render(){
        const arr = this.props.colors
        const lis = arr.map((item,index)=><li key={index}>{item}</li>)
        console.log(this.props);
        return(
            // Provider传递数据的，设置value属性表示要传递的数据
            <Provider value='pink'>
            <div className='app'>
                <Node />
            </div>
            <div>props的默认值{this.props.pageSize}</div>
            <ul>{lis}</ul>
            </Provider>
            
        )
    }
}
// 添加props校验约定类型,常见类型:array,bool,func,number,object,string,React元素类型：element
// 常见类型：
// OptionalFunc:PropTypes.func
// 必选
// requiredFunc:PropTypes.func.isRequired
// 特定结构对象
// optionalObjectWithShape: PropTypes.shape({
    // color:PropTypes.string,
    // fontSize:PropTypes.number
// })

App.propTypes = {
    colors:PropTypes.array, //属性color的类型，数组类型
    fn: PropTypes.func.isRequired, // 属性为fn的类型，函数（func）类型且必填
    tag:PropTypes.element, //属性tag类型，react元素（element）
    filter:PropTypes.shape({ // 属性filter类型 对象（{area：'上海'，price：1999}）
        area:PropTypes.string,
        price:PropTypes.number
    })
}
// 还可以设置组件默认值defaultProps
App.defaultProps = {
    pageSize: 10
}
class Node extends React.Component{
    render(){
        return(
            <div className='node'>
                <SubNode /> 
            </div>
        )
    }
}
class SubNode extends React.Component{
    render(){
        return(
            <div className='subnode'>
                <Child /> 
            </div>
        )
    }
}

const Child = prop => {
    return (
        // 调用consumer组件接收数据
        // 语法结构
        // <consumer>
            // {/* {data=><span>data参数表示接收到的数据--{data}</span>} */}
        // {/* </consumer> */}
        <div className='child'>
            <Consumer>
            {data=><span>我是子节点 -- {data}</span>}
            </Consumer></div>
    )
}
export {App}